<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2024/8/20
  Time: 10:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<form class="layui-form" action="" lay-filter="Filter">
    <input type="hidden" name="id">
    <div class="layui-form-item"> <label class="layui-form-label">博客名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入博客名" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
            <select id="typeId" name="typeId" lay-filter="typeId">
                <option value="">请选择博客类型</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item"> <label class="layui-form-label">封面</label>
        <div class="layui-input-block">
            <input type="hidden" name="image" id="imageId">
            <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                <i class="layui-icon layui-icon-upload"></i> 单图片上传
            </button>
            <div style="width: 132px;">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                    <div id="ID-upload-demo-text"></div>
                </div>
                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>

        </div>
    </div>
    <div class="layui-form-item"> <label class="layui-form-label">点击次数</label>
        <div class="layui-input-block">
            <input type="text" name="clickCount" placeholder="请输入点击次数" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item"> <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
            <textarea id="contentId" name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item"> <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="text" name="status" placeholder="请输入状态" autocomplete="off" class="layui-input">
        </div>
    </div>
    <%--<div class="layui-form-item"> <label class="layui-form-label">创建时间</label>
        <div class="layui-input-block">
            <input type="text" name="createTime" placeholder="请输创建时间" autocomplete="off" class="layui-input">
        </div>
    </div>--%>
    <div class="layui-form-item">
        <div class="layui-input-block"> <button type="submit" class="layui-btn" lay-submit="" lay-filter="formFilter">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script src="/static/js/jquery-2.1.4.js"></script>
<script src="/static/js/mylayer.js"></script>
<script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/kindeditor/kindeditor/kindeditor.js" type="text/javascript" charset="utf-8"></script>
<script>
    //富文本编辑器
    var kindEditorParams = {
        afterBlur: function() {
            this.sync();
        }
    };
    //关联一下
    var contentId = KindEditor.create('#contentId',kindEditorParams);


    layui.use(['form'], function() {
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;

        //获取id值
        var queryString = window.location.search;
        var urlParams = new URLSearchParams(queryString);
        var id = urlParams.get("id");
        //先查找，再添加
        //写一个Ajax请求，获取当前id下的所有blog值
        $.post(
            //虽然是在blog里调用的是selectById方法，但是要把type的selectAll一起打包发回来
            '/blog?method=selectById',
            //把id传过去
            {"id":id},//应该只用传id吗
            function (result) {
                console.log('result:')
                console.log(result);
                $(result.data.list).each(function (){
                    $('#typeId').append('<option value="'+this.id+'">'+this.name+'</option>');
                })
                form.render('select');

                form.val('Filter',result.data.blog);
                //回显图片要怎么做？
                //找到这个image标签，给它设置属性
                $('#ID-upload-demo-img').attr('src','/pic/'+result.data.blog.image);
                //回显内容好像是用HTML
                contentId.html(result.data.blog.content);//contentId是kindEditor的名字
            },
            'json'
        )
        //监听提交
        form.on('submit(formFilter)', function (data) {
            console.log(data.field);
            $.post(
                '/blog?method=update',
                data.field,
                function (result) {
                    console.log(result)
                    if (result.code == 0){
                        mylayer.okMsg(result.msg);
                        //关闭弹窗
                        setInterval(function () {
                            //关闭弹出层
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            //刷新父页面
                            window.parent.location.reload();
                        }, 2000);
                    }
                },
                'json'
            )

            /* layer.alert(JSON.stringify(data.field), {
                 title: '最终的提交信息'
             })
             return false;*/
            return false;
        });
        //下拉框
        $.post(
            '/type?method=selectAll',
            function (jsonObj){
                console.log(jsonObj);
                //遍历
                $(jsonObj.data).each(function() {
                    $('#typeId').append('<option value="'+this.id+'">'+this.name+'</option>');
                });

                // 更新表单选择框
                form.render('select');
            },
            'json'
        )
        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: '/upload', // 实际使用时改成您自己的上传接口即可。
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });

                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                // 若上传失败
                console.log(res);
                $('#imageId').val(res.data)
                // 上传成功的一些操作
                // …
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
            error: function(){
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function(n, elem, e){
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

    })
</script>
</body>
</html>
